import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../../../context';
import styles from './index.module.scss';
import classNames from 'classnames';
import { FragmentCode } from '@/components/basicComp/FragmentCode';
import { FragmentPreview } from '@/components/fragment-preview';
import { FragmentRfp } from '@/components/fragment-rfp';
import Header from './Header';
import { update } from '@/utils/immutableUtil';
import CodeView3 from '@/components/basicComp/CodeView3';

@withConsumer
@connect(({ chat }) => ({
  fragment: chat.fragment,
  codeResult: chat.codeResult,
  itemIndex: chat.itemIndex,
  currentTab: chat.currentTab,
  openPreview: chat.openPreview,
  previewType: chat.previewType,
  isUpdateCode: chat.isUpdateCode,
}))
class Comp extends Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const {
      fragment,
      codeResult,
      itemIndex,
      currentTab,
      openPreview,
      previewType,
      isUpdateCode,
    } = this.props;
    const {
      value: { changeState, controller },
    } = this.props;

    return (
      <div className={classNames([styles.preview])}>
        <Header
          onClose={() => {
            changeState({ openPreview: false });
          }}
        />

        <div className={styles.code}>
          <div className={styles.codeCont}>
            {currentTab === 'code' && (
              <>
                <div className={styles.options}>
                  {!isUpdateCode ? (
                    <button
                      className={styles.button1}
                      onClick={() => {
                        changeState({ isUpdateCode: true });
                      }}
                    >
                      Edit Code
                    </button>
                  ) : (
                    <button
                      className={styles.button1}
                      onClick={() => {
                        changeState({ isUpdateCode: false });
                      }}
                    >
                      Save Code
                    </button>
                  )}
                </div>

                {!isUpdateCode && (
                  <>
                    {fragment.code && fragment.file_path && (
                      <FragmentCode
                        files={[
                          {
                            name: fragment.file_path,
                            content: fragment.code,
                          },
                        ]}
                      />
                    )}
                  </>
                )}

                {isUpdateCode && (
                  <>
                    {fragment.code && fragment.file_path && (
                      <CodeView3
                        path={fragment.file_path}
                        content={fragment.code}
                        onChange={(val) => {
                          changeState({
                            fragment: {
                              ...fragment,
                              code: val,
                              isUpdate:true,
                            },
                          });
                          console.log(val);
                        }}
                      />
                    )}
                  </>
                )}
              </>
            )}

            {currentTab === 'fragment' && (
              <>
                {previewType == 'iframe' && (
                  <FragmentRfp
                    html={fragment.code}
                    onClose={() => {
                      changeState({ openPreview: false });
                    }}
                  />
                )}
                {previewType == 'e2b' && codeResult && (
                  <FragmentPreview
                    result={codeResult}
                    onClose={() => {
                      changeState({ openPreview: false });
                    }}
                  />
                )}
              </>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Comp;
